<template>
  <div style="height: 100%;overflow: auto">
    <div style="text-align: right">
      <span>日期：</span>
      <el-select v-model="dateVal" size="mini">
        <el-option :value="1" label="日"></el-option>
        <el-option :value="7" label="周"></el-option>
        <el-option :value="30" label="月"></el-option>
      </el-select>
      <span style="margin-left: 10px">类型：</span>
      <el-select v-model="typeVal" size="mini">
        <el-option :value="0" label="资产"></el-option>
        <el-option :value="1" label="员工"></el-option>
      </el-select>
    </div>
    <div style="height: 500px;margin-bottom: 5px">
      <myEcharts style="width:100%;height: 100%;" :autoresize="true" :options="options1"></myEcharts>
    </div>
    <div style="height: 500px">
      <myEcharts style="width:100%;height: 100%;" :autoresize="true" :options="options2"></myEcharts>
    </div>
    <div class="flex-row-container" style="height: 500px">
      <myEcharts style="width:50%;height: 100%;" :autoresize="true" :options="options3"></myEcharts>
      <myEcharts style="width:50%;height: 100%;" :autoresize="true" :options="options4"></myEcharts>
    </div>
  </div>
</template>
<script>
// 水波图
import 'echarts-liquidfill'
import { getHomeData } from "@/api/home";
export default {
  data() {
    return {
      typeVal: 1,
      dateVal: 30,
      angle: 0,
      options1: {},
      options2: {},
      options3: {},
      options4: {}
    }
  },
  computed: {
    condition() {
      return {
        typeVal: this.typeVal,
        dateVal: this.dateVal
      }
    }
  },
  watch: {
    condition: {
      handler(newVal) {
        getHomeData(newVal).then(res => {
          console.log(res)
          if (res.status === 200 && res.obj.length) {
            this.setOption1(res.obj)
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.setOption2()
    this.setOption3()
    setInterval(() => {
      this.angle = this.angle + 3
      this.setOption3(this.angle)
    }, 100)
    this.setOption4()
  },
  methods: {
    setOption1(list) {
      let yData = list.map(el => el.employName)
      let mapObj = {}
      list.forEach(el => {
        el.fenceList.forEach(f => {
          if (!mapObj[f.fenceName]) {
            mapObj[f.fenceName] = []
          }
          mapObj[f.fenceName].push(f.stayTime)
        })
      })
      console.log(mapObj)
      console.log(yData)
      let legends = Object.keys(mapObj)
      let series = legends.map(el => {
        return {
          name: el,
          type: 'bar',
          stack: 'Tik Tok',
          barMaxWidth: 25,
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              offset: [-20, 0],
              formatter: function (params) {
                return params.data ? (params.data + '分钟') : ''
              },
              textStyle: {
                align: 'center',
                baseline: 'middle',
                fontSize: 14,
                fontWeight: '400',
                color: '#fff',
              }
            },
          },
          data: mapObj[el]
        }
      })
      this.options1 = {
        // backgroundColor: '#32374d',
        backgroundColor: '#ECF5FF ',
        title: [
          {
            text: '栅栏停留时长',
            x: '50%',
            y: 0,
            textAlign: 'center',
            textStyle: {
              fontSize: '24',
              fontWeight: '100',
              color: '#a4a8b4',
              textAlign: 'center',
            },
          }
        ],
        legend: {
          top: '20%',
          textStyle: {
            color: '#a4a8b4'
          },
        },
        grid: {
          left: '3%',
          top: '30%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true
          },
          axisLabel: {
            // margin: 10,
            color: '#a4a8b4',
          }
        },
        yAxis: {
          type: 'category',
          data: yData,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'transparent'
            }
          },
          splitLine: {
            show: true
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            // margin: 10,
            color: '#a4a8b4',
          }
        },
        color: [
          new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: 'rgba(235,112,236,.8)'
          },
            {
              offset: 0.8,
              color: 'rgba(77,75,221,.8)'
            },
            {
              offset: 1,
              color: 'rgba(77,75,221,0)'
            }
          ]),
          new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: 'rgba(255,157,96,.8)'
          },
            {
              offset: 0.8,
              color: 'rgba(246,84,157,.8)'
            },
            {
              offset: 1,
              color: 'rgba(246,84,157,0)'
            }
          ]),
          new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: 'rgba(132,225,145,.8)'
          },
            {
              offset: 0.8,
              color: 'rgba(106,185,242,.8)'
            },
            {
              offset: 1,
              color: 'rgba(106,185,242,0)'
            }
          ]),
        ],
        series: [
          ...series,
        ]
      };
    },
    setOption2() {
      this.options2 = {
        // backgroundColor: '#080b30',
        // backgroundColor: '#32374d',
        backgroundColor: '#ECF5FF ',
        title: [
          {
            text: '告警趋势',
            x: '50%',
            y: 30,
            textAlign: 'center',
            textStyle: {
              fontSize: '24',
              fontWeight: '100',
              color: '#a4a8b4',
              textAlign: 'center',
            },
          }
        ],
        legend: {
          show: true,
          x: '100',
          top: '80',
          textStyle: {
            color: '#a4a8b4',
            fontSize: 16
          },
          data: ['栅栏1', '栅栏2']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)',
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)'
                }],
                global: false
              }
            },
          },
        },
        grid: {
          top: '25%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: [
            {
          type: 'category',
          axisLine: {
            show: true
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            color: '#a4a8b4'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: ['2021-03-24 16:00', '2021-03-24 16:30', '2021-03-24 17:00', '2021-03-24 17:30', '2021-03-24 18:00', '2021-03-24 18:30', '2021-03-24 19:00', '2021-03-24 19:30', '2021-03-24 20:00',],
        }
        ],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: '#d1e6eb',
            },
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '栅栏1',
          type: 'line',
          smooth: true, //是否平滑
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 10,
          lineStyle: {
            normal: {
              color: "#00b3f4",
            },
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#00b3f4',
            },
          },
          itemStyle: {
            color: "#00b3f4",
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,179,244,0.3)'
              },
                {
                  offset: 1,
                  color: 'rgba(0,179,244,0)'
                }
              ], false)
            }
          },
          data: [20, 10, 30, 50, 40, 30, 20, 10, 0]
        },
          {
            name: '栅栏2',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#00ca95",
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#00ca95',
              }
            },
            itemStyle: {
              color: "#00ca95",
            },
            tooltip: {
              show: true
            },
            areaStyle: {
              normal: {
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,202,149,0.3)'
                },
                  {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                  }
                ], false),
              }
            },
            data: [40, 30, 20, 50, 10, 50, 30, 20, 60]
          },
        ]
      };
    },
    setOption3(angle) {
      let value = 55.33;
      let option = {
        // backgroundColor: "#061740",
        backgroundColor: '#ECF5FF',
        title: {
          text: '{a|' + '告警率' + ' ' + value + '}{c|%}',
          x: 'center',
          y: 5,
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                color: 'red'
              },

              c: {
                fontSize: 14,
                color: 'red',
                // padding: [5,0]
              }
            }
          }
        },
        legend: {
          type: "plain",
          orient: "vertical",
          right: 0,
          top: "10%",
          align: "auto",
          data: [{
            name: '涨价后没吃过',
            icon: "circle"
          }, {
            name: '天天吃',
            icon: "circle"
          }, {
            name: '三五天吃一次',
            icon: "circle"
          }, {
            name: '半个月吃一次',
            icon: "circle"
          }],
          textStyle: {
            color: "white",
            fontSize: 16,
            padding: [10, 1, 10, 0]
          },
          selectedMode: false
        },
        series: [{
          name: "ring5",
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function (params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                startAngle: (0 + angle) * Math.PI / 180,
                endAngle: (90 + angle) * Math.PI / 180
              },
              style: {
                stroke: "#0CD3DB",
                fill: "transparent",
                lineWidth: 1.5
              },
              silent: true
            };
          },
          data: [0]
        }, {
          name: "ring5",
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function (params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                startAngle: (180 + angle) * Math.PI / 180,
                endAngle: (270 + angle) * Math.PI / 180
              },
              style: {
                stroke: "#0CD3DB",
                fill: "transparent",
                lineWidth: 1.5
              },
              silent: true
            };
          },
          data: [0]
        }, {
          name: "ring5",
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function (params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                startAngle: (270 + -angle) * Math.PI / 180,
                endAngle: (40 + -angle) * Math.PI / 180
              },
              style: {
                stroke: "#0CD3DB",
                fill: "transparent",
                lineWidth: 1.5
              },
              silent: true
            };
          },
          data: [0]
        }, {
          name: "ring5",
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function (params, api) {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                startAngle: (90 + -angle) * Math.PI / 180,
                endAngle: (220 + -angle) * Math.PI / 180
              },
              style: {
                stroke: "#0CD3DB",
                fill: "transparent",
                lineWidth: 1.5
              },
              silent: true
            };
          },
          data: [0]
        }, {
          name: "ring5",
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function (params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
            let point = getCirlPoint(x0, y0, r, (90 + -angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: "#0CD3DB",//粉
                fill: "#0CD3DB"
              },
              silent: true
            };
          },
          data: [0]
        }, {
          name: "ring5",  //绿点
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function (params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
            let point = getCirlPoint(x0, y0, r, (270 + -angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: "#0CD3DB",      //绿
                fill: "#0CD3DB"
              },
              silent: true
            };
          },
          data: [0]
        }, {
          name: '吃猪肉频率',
          type: 'pie',
          radius: ['58%', '45%'],
          silent: true,
          clockwise: true,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center",

            }
          },
          data: [{
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#4FADFD' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#28E8FA' // 100% 处的颜色
                  }]
                },
              }
            }
          },
            {
              value: 100 - value,
              name: "",
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#173164"
                }
              }
            }
          ]
        },

          {
            name: "",
            type: "gauge",
            radius: "58%",
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              length: 60,
              lineStyle: {
                width: 5,
                color: "#061740"
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [{
              value: 0,
              name: ""
            }]
          },

        ]
      };

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
          x: x1,
          y: y1
        }
      }

      this.options3 = option


    },
    setOption4() {
      this.options4 = {
        // backgroundColor: "#0f375f",
        backgroundColor: '#ECF5FF ',
        title: [
          {
            text: '告警类别占比',
            x: '50%',
            y: 0,
            textAlign: 'center',
            textStyle: {
              fontSize: '20',
              fontWeight: '100',
              color: '#a4a8b4',
              textAlign: 'center',
            },
          }
        ],
        legend: {
          orient: 'vertical',
          top: "center",
          right: "5%",
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7'],
          textStyle: {
            color: "#a4a8b4",
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '告警类别占比',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['50%', '55%'],
            roseType: 'radius',
            label: {
              show: true,
              normal: {
                position: 'outside',
                fontSize: 16
              }
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true
            },
            data: [{
              value: 100,
              name: '人员告警',
              itemStyle: {
                color: "rgba(50,123,250,0.7)",
                borderColor: "rgba(50,123,250,1)",
                borderWidth: 3
              }
            },
              {
                value: 30,
                name: '栅栏告警',
                itemStyle: {
                  color: "rgba(23,216,161,0.7)",
                  borderColor: "rgba(23,216,161,1)",
                  borderWidth: 3
                }
              },
              {
                value: 50,
                name: '正常',
                itemStyle: {
                  color: "rgba(23,216,161,0.7)",
                  borderColor: "rgba(23,216,161,1)",
                  borderWidth: 3
                }
              }
            ]
          }]
      };
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
